<template>
	<HomeCard headName="工作量分布" headIcon="sys-logs">
		<template #head-extra>
			<el-select v-model="year" @change="getProjectData">
				<el-option v-for="item in YEAR_LIST.getYearList(-1, 30)" :key="item.id" :label="item.label" :value="item.value" />
			</el-select>
		</template>
		<div id="workloadEcharts" style="height: 400px; border: 1px solid #ececec; border-radius: 5px"></div>
	</HomeCard>
	<!-- <div class="home-comb-panel">
    <div class="home-panel">
      <div class="home-panel-title">
        <div class="title-content">{{ title }}</div>
        <div class="title-select">
          <el-select v-model="year"
            @change="getProjectData">
            <el-option v-for="item in YEAR_LIST.getYearList(-1, 30)"
              :key="item.id"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </div>
      </div>
      <div class="home-panel-body home-wokload-body">
        <div id="workloadEcharts"
          style="height: 400px;"></div>
      </div>
    </div>
  </div> -->
</template>

<script setup>
import * as echarts from 'echarts';
import HomeCard from './HomeCard.vue';
import { YEAR_LIST } from '@/common/cons-common.js';
import { useHomeApi } from '@/api';
import { reactive } from 'vue';
const { getAuditCount } = useHomeApi();
const props = defineProps({
	title: { type: String, default: '工作量分布' },
});

const year = ref(new Date().getFullYear());

let workChart = reactive({});
let chartData = reactive([]);
const initWorkloadEchart = () => {
	workChart.setOption({
		grid: {
			left: '40px',
			right: '20px',
		},
		tooltip: {
			show: true,
			formatter: '{b}: {c} 个',
		},
		xAxis: {
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
		},
		yAxis: {
			name: '单位（个）',
			type: 'value',
			axisLine: {
				show: true,
			},
		},
		series: [
			{
				data: chartData,
				type: 'line',
				smooth: true,
			},
		],
	});
};
//获取工作量分布数据
const getProjectData = async () => {
	const result = await getAuditCount(year.value);
	const { data, code, msg } = result;
	if (code === 200) {
		chartData = data;
		initWorkloadEchart();
	} else {
		console.log('err', msg);
	}
};

onMounted(() => {
	workChart = echarts.init(document.getElementById('workloadEcharts'));
	getProjectData();
});
</script>

<style lang="scss" scoped>
.home-comb-panel {
	border-radius: 5px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: rgba(0, 0, 0, 0.65);
	font-size: 14px;
	font-variant: tabular-nums;
	line-height: 1.5;
	list-style: none;
	font-feature-settings: 'tnum';
	position: relative;
	background: #fff;
	transition: all 0.3s;
	margin-bottom: 15px;
}
.home-wokload-body {
	min-height: 220px;
	border: 1px solid #ececec;
	border-radius: 5px;
	padding: 10px;
	max-height: 500px;
	overflow: auto;
}
.home-audit-item {
	// border: 1px solid;
	display: flex;
	&:hover {
		background: #ececec;
	}
	.audit-proj {
		flex: 2;
	}
	.audit-status {
		text-align: left;
	}
	.audit-idea {
		text-align: left;
	}
	.audit-time {
		flex: none;
		width: 155px;
		text-align: right;
	}
}
.audit-info-item {
	flex: 1;
	margin-right: 8px;
	padding: 5px 5px;
	&:last-child {
		margin-right: 0;
	}
}
</style>
